<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
  window.onload = function () {
    	//点击按钮以后添加超链接
      var ul = document.getElementById('ul')
      var button1 = document.getElementById('button1')
      button1.onclick = function () {
        // 创建新链接的过程！(两种方法)
        /**
        var li = document.createElement('li')
        var a = document.createElement('a')
        var aText = document.createTextNode('创建新链接')
        a.appendChild(aText)
        //向a中添加href属性
        a.href = "#";
        li.appendChild(a)
        ul.appendChild(li)
        */
        var li = document.createElement('li')
        li.innerHTML = "<a href='javascript:;' class='link'>新建的链接"
        ul.appendChild(li)
      };

      	/*
				 * 为每一个超链接都绑定一个单击响应函数
				 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
				 * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
				 */
				//获取所有的a
        var aArr = document.getElementsByTagName('a')
      //遍历
				/*for(var i=0 ; i<allA.length ; i++){
					allA[i].onclick = function(){
						alert("我是a的单击响应函数！！！");
					};
				}*/
        /*
				 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
				 * 我们可以尝试将其绑定给元素的共同的祖先元素
				 * 
				 * 事件的委派
				 * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
				 * 		从而通过祖先元素的响应函数来处理事件。
				 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
				 */
         ul.onclick = function (event) {
           event = event || window.event
        	/*
					 * target
					 * 	- event中的target表示的触发事件的对象
					 */
					// alert(event.target);
          //如果触发事件的对象是我们期望的元素，则执行否则不执行
          if (event.target.className == "link") {
            alert('我是ul的单击响应函数')
          }
        }
  }
  </script>
  
</head>
<body>
  <button id="button1">添加超链接</button>
		
  <ul id="ul" style="background-color: #bfa;">
    <li>
      <p>我是p元素</p>
    </li>
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
  </ul>
</body>
</html>